✅HAMPU: vite v7

GPT-5.icon

以下は、Vite v6 → v7 への移行時に確認すべきポイントの実践チェックリストです。あなたのリポジトリ構成（vite.config.ts / package.json）に即して要点を絞っています。

最重要チェック（破壊的変更）

Node.js バージョン

18 は非対応。Node 20.19+ / 22.12+ が必要。

あなたの package.json は Volta で node 24.6.0 → OK。

コマンド: node -v / npx vite --version で確認。

デフォルトのブラウザターゲット変更

build.target のデフォルトが 'baseline-widely-available'（例: Chrome 107 など）に更新。

もし、より古いブラウザ（Chrome 87 など）をサポートしたい場合は、build.target を明示指定するか、vite-plugin-legacy を検討。

既存コードで明示的な target 指定がなければ（あなたの vite.config.ts は未指定）そのままでも動作します。

Sass レガシー API サポート削除

css.preprocessorOptions.sass.api / scss.api を設定している場合は削除。

あなたの vite.config.ts では未使用 → 影響なし。

廃止済み機能の削除

splitVendorChunkPlugin: 使っていないか確認（あなたの設定では未使用 → 影響なし）。

transformIndexHtml の enforce/transform（フックレベル）: v7 では order / handler を使用。もしカスタムプラグインで transformIndexHtml を使っている場合、記述を見直す。

optimizeDeps.entries は常にグロブ扱いに変更。文字列パスを直書きしている場合はグロブにする（あなたの設定では未設定 → 影響なし）。

中間ウェアの適用順変更

一部ミドルウェアが configureServer / configurePreviewServer より前に適用。

CORS のヘッダなどを独自に操作している場合、意図せずヘッダが残らないか確認。

あなたの vite.config.ts では独自サーバーフックなし → 影響は限定的。ただし preview（vite preview）時の挙動確認は推奨。

SSR と周辺の注意点

SSR ランタイムで vite_ssr_exportName が必要に（内部事情の変更）。

通常は Vite の変換に任せれば問題なし。独自の SSR モジュールランナーを持っている場合のみ影響。

あなたは react-router + cloudflare プラグインを使用。基本的には各プラグイン側が対応済みか要確認。build と dev の SSR レンダリングを実機でテスト推奨。

legacy.proxySsrExternalModules などの no-op プロパティ削除

もし設定していれば削除（あなたの設定では未使用 → 影響なし）。

プラグイン互換性（あなたの構成に特化）

@react-router/dev の vite プラグイン（reactRouter()）

v7 系は Vite 7 対応が進んでいますが、ビルド・SSR・HMR を実行してエラーがないか確認。

@cloudflare/vite-plugin

^1.0.12 は Vite 7 を想定したバージョン。wrangler と preview の動作を確認。

@tailwindcss/vite

v4 系プラグイン。PostCSS/Tailwind v4 と合わせて動く想定。ビルド・HMR の警告・エラー確認。

vite-tsconfig-paths

^5.1.4 は Vite 7 対応。エイリアス解決が dev/build/preview 全てで期待通りか確認。

vitest / @playwright/test

vitest 3 は Vite 5+ で動作。Vite 7 でも一般に問題なし。テストランを実行して確認。

PostCSS/Tailwind

Tailwind v4 は PostCSS v8 と組み合わせ。既に依存関係は満たしているので OK。

ブラウザサポートに関するオプション（必要な場合のみ）

もし Baseline より古いブラウザを明示的にサポートしたい場合、以下のいずれかを検討してください。

1. build.target を明示指定（例: 'es2020' や具体的なブラウザリスト）

2. vite-plugin-legacy を導入し、追加のトランスパイル/ポリフィルを適用

例: build.target を明示（必要な場合のみ）

code:typescript

import { reactRouter } from "@react-router/dev/vite";

import { cloudflare } from "@cloudflare/vite-plugin";

import tailwindcss from "@tailwindcss/vite";

import { defineConfig } from "vite";

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({

plugins: [

cloudflare({ viteEnvironment: { name: "ssr" } }),

tailwindcss(),

reactRouter(),

tsconfigPaths(),

],

build: {

// Baseline より古い環境が必要な場合のみ設定

// 例: もう少し古い JS 構文に落とす

},

});

運用チェックリスト（動作確認手順）

開発サーバー

npm run dev を起動し、HMR、ルーティング、SSR（必要なら）を確認。

ビルド

npm run build の警告/エラー確認（Sass レガシー API、transformIndexHtml 関連の警告がないか）。

プレビュー

npm run preview で動的ルートや CORS が期待通りか確認（中間ウェア順の変更に伴う差異がないか）。

E2E / テスト

npm run test / test:e2e を走らせ、ビルド成果物やエイリアス解決、SSR が問題ないか検証。

古いブラウザ要件

対象ブラウザと要件を再確認。必要に応じて target 明示や legacy プラグイン、ポリフィルの導入を検討。

念のためのコード/設定棚卸し

vite.config.ts

transformIndexHtml の旧プロパティ（enforce/transform）使用の有無

optimizeDeps.entries にリテラルパスを渡していないか（渡すならグロブに）

server / preview の cors や独自ヘッダ処理の有無（中間ウェア順変更に注意）

package.json

"sass" / "less" / "stylus" を使う場合、各バージョンが peerDependencies 範囲に収まるか確認

splitVendorChunkPlugin を使っていないか確認（必要なら rollupOptions.output.manualChunks へ移行）

トラブルが出た場合のヒント

依存の一斉再解決

rm -rf node_modules package-lock.json && npm i

キャッシュ関連

Vite の依存最適化キャッシュが不整合の場合があるため、node_modules/.vite を削除して再起動。

SSR まわり

ランタイムで vite_ssr_exportName エラーが出たら、独自 SSR ランタイムのフックや変換を疑う。最小再現で確認。

このプロジェクトの現状では、特別な追従変更はほとんど不要に見えます。まずは上記の動作確認を行い、ブラウザサポート要件に応じて build.target の明示や legacy 対応を検討する、という流れで十分です。必要なら、あなたのサポートブラウザ要件を教えてください。最適な設定例を具体化します。